<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击出现小星星</title>
    <style>
        img {
            position: absolute;
            /* left: 100px; */
            /* top: 100px; */
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- <img src="./timg.png" alt=""> -->
    <script>
        document.oncontextmenu = function (e) {
            // 取消右击出现菜单  或者直接return false
            e.preventDefault();
        };

        // 方法一创建节点
        // document.onmousedown = function (e) {
        //     // 注意click事件e.which按右键没用
        //     console.log(e.which);
        //     let img = document.createElement("img")
        //     img.src = "./timg.png"
        //     img.style.top =  e.pageY + "px";
        //     img.style.left = e.pageX + "px";
        //     // let str = '<img src="./timg.png" style="top: ' + e.pageY + 'px; left: ' + e.pageX + 'px' + '>'
        //     document.body.appendChild(img);
        // }


        // 方法二创建Image对象
        document.onmousedown = function (e) {
            let img = new Image();
            // console.log(img);
            
            img.src = "./timg.png";
            // 注意offsetLef不能设置值
            img.style.top = e.pageY + "px";
            img.style.left = e.pageX + "px";
            document.body.appendChild(img);

        }

    </script>
</body>

</html>